<template>
  <div>
    <div class="patient_log">
      <span class="s1">患者ID</span>
      <input class="input_box"/>
      <span class="s2">密码</span>
      <input class="input_box" type="password"/>
      <span class="s3">
      <el-checkbox v-model="checked" name="a">记住密码</el-checkbox>
    </span>
      <span class="s4" @click="goForget">忘记密码？</span>
      <span class="login_sp" type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">登录</span>
      <div class="last">
        <span>没有账号？</span>
        <span style="color: #1362FC" @click="goRegister">注册</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PatientLogin",
  data() {
    return {
      fullscreenLoading: false,
      checked: false,
    };
  },
  methods: {
    openFullScreen1() {
      this.fullscreenLoading = true;
      this.$router.push('/index');
      setTimeout(() => {
        this.fullscreenLoading = false;
      }, 1000);
    },
    goRegister() {
      event.stopPropagation();
      this.$router.push('/user/register');
    },
    goForget(){
      event.stopPropagation();
      // console.log('nnn');
      this.$router.push('./forget');
    },
  }
}
</script>

<style scoped>
  .patient_log {
    width: 100%;
    height: 100%;
    /*background-color: lavender;*/
  }
  span {
    cursor: default;
  }
  .s1 {
    display: block;
    text-align: left;
    /*background-color: lemonchiffon;*/
    margin-top: 10px;
    margin-bottom: 10px;
    color: #969BA0;
    font-weight: 600;
    font-size: 14px;
  }
  .s2 {
    display: block;
    text-align: left;
    /*background-color: lemonchiffon;*/
    margin-top: 20px;
    margin-bottom: 10px;
    color: #969BA0;
    font-weight: 600;
    font-size: 14px;
  }
  input {
    background:none;
    outline:none;
    border:none;
  }
  .input_box {
    width: 100%;
    display: block;
    /*height: 40px;*/
    height: 3.2rem;
    border-radius: 14px;
    border: 1px solid #F2F2F2;
    padding: 10px;
    color: #969BA0;
    font-weight: 400;
    transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
  }
  .input_box:focus {
    border-color: #1362FC;
  }
  /deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #1362FC;
    border-color: #1362FC;
  }
  /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #1362FC;
  }
  /deep/.el-checkbox.is-bordered.is-checked{
    border-color: #1362FC;
  }
  div>.s3 {
    display: block;
    text-align: left;
    background-color: #fff;
    height: 50px;
    line-height: 50px;
  }
  .s4 {
    /*background-color: lemonchiffon;*/
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: left;
    font-size: 14px;
    color: #969BA0;
  }
  .login_sp {
    display: block;
    letter-spacing: 2px;
    height: 50px;
    line-height: 50px;
    color: white;
    background-color: #1362FC;
    font-weight: 600;
    margin-top: 12px;
    border-radius: 16px;
  }

  .login_sp:hover {
    background-color: #034BD9;
    transition: .3s;
  }
  .last {
    /*background-color: lavender;*/
    padding-top: 10px;
    height: 40px;
    line-height: 40px;
    text-align: left;
    font-size: 13px;
    color: #969BA0;
  }
</style>